<template>
  <view class="rich-text-view">
    <!-- 使用rich-text组件渲染HTML内容 -->
    <rich-text :nodes="processedContent" :selectable="selectable" :space="space" :decode="decode" @tap="onTap"
      @longpress="onLongPress" />
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'

  // 定义props
  const props = defineProps({
    // HTML内容
    content: {
      type: String,
      default: ''
    },
    // 是否可选择
    selectable: {
      type: Boolean,
      default: false
    },
    // 空格处理
    space: {
      type: String,
      default: 'nbsp'
    },
    // 是否解码
    decode: {
      type: Boolean,
      default: true
    },
    // 样式配置
    styles: {
      type: Object,
      default: () => ({
        fontSize: '28rpx',
        lineHeight: '1.6',
        color: '#333'
      })
    },
    // 最大长度
    maxLength: {
      type: Number,
      default: 10000
    }
  })

  // 定义emits
  const emit = defineEmits(['tap', 'longpress', 'link-click'])

  // 处理HTML内容
  const processedContent = computed(() => {
    if (!props.content) return ''
    
    let content = props.content
    
    // 限制长度
    if (content.length > props.maxLength) {
      content = content.substring(0, props.maxLength) + '...'
    }
    
    // 安全清理
    content = cleanHtmlContent(content)
    
    // 使用CSS类替换内联样式
    content = content
      .replace(/<span[^>]*style="[^"]*text-align:\s*right[^"]*"[^>]*>(.*?)<\/span>/gi, 
        '<span class="text-right">$1</span>')
      .replace(/<span[^>]*style="[^"]*text-align:\s*center[^"]*"[^>]*>(.*?)<\/span>/gi, 
        '<span class="text-center">$1</span>')
      .replace(/<span[^>]*style="[^"]*color:\s*red[^"]*"[^>]*>(.*?)<\/span>/gi, 
        '<span class="text-red">$1</span>')
      .replace(/<span[^>]*style="[^"]*color:\s*blue[^"]*"[^>]*>(.*?)<\/span>/gi, 
        '<span class="text-blue">$1</span>')
    
    // 添加样式
    content = addStyles(content, props.styles)
    
    // 开发环境下输出调试信息
    if (process.env.NODE_ENV === 'development') {
      console.log('原始HTML:', props.content)
      console.log('处理后的HTML:', content)
    }
    
    return content
  })

  // 清理HTML内容，移除危险标签和属性
  const cleanHtmlContent = (htmlContent) => {
    if (!htmlContent) return ''

    return htmlContent
      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '') // 移除script标签
      .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '') // 移除iframe标签
      .replace(/javascript:/gi, '') // 移除javascript协议
      .replace(/on\w+\s*=/gi, '') // 移除事件处理器
      .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '') // 移除style标签
      // 处理text-align样式，确保在uni-app中正确显示
      .replace(/text-align:\s*right/gi, 'text-align: right !important')
      .replace(/text-align:\s*center/gi, 'text-align: center !important')
      .replace(/text-align:\s*left/gi, 'text-align: left !important')
  }

  // 添加样式到HTML内容
  const addStyles = (htmlContent, styles) => {
    if (!htmlContent || !styles) return htmlContent
    
    const styleString = Object.entries(styles)
      .map(([key, value]) => `${key}: ${value}`)
      .join('; ')
    
    return `<div style="${styleString}">${htmlContent}</div>`
  }

  // 点击事件处理
  const onTap = (e) => {
    emit('tap', e)
  }

  // 长按事件处理
  const onLongPress = (e) => {
    emit('longpress', e)
  }

  // 链接点击处理
  const handleLinkClick = (href) => {
    emit('link-click', href)
  }
</script>

<style scoped>
.rich-text-view {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
}

/* 富文本样式类 */
:deep(.text-right) {
  text-align: right !important;
  display: block !important;
  width: 100% !important;
}

:deep(.text-center) {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

:deep(.text-red) {
  color: red !important;
}

:deep(.text-blue) {
  color: blue !important;
}

:deep(.text-green) {
  color: green !important;
}

:deep(.text-bold) {
  font-weight: bold !important;
}

:deep(.text-italic) {
  font-style: italic !important;
}

:deep(.text-underline) {
  text-decoration: underline !important;
}
</style>